<template>
  <div class="slider">
    <div class="slider-wrap">
      <ul class="slider-items" :style="[sliderActive,{'width':sliderImg.length*100+'vw'}]" @touchstart="stopSlider($event)" @touchmove="moveSlider($event)" @touchend="continSilder($event)">
        <li class="slider-item" v-for="(item,index) in sliderImg"><img :src="item.src" class="item-img"></li>
      </ul>
    </div>
    <ul class="slider-page">
      <li class="slider-btn" v-for="(item,index) in bannerList" :class="{'active':index === nowSlider}"></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Slider',
  props: ['bannerList'],
  data () {
    return {
      sliderActive: {
        transform: 'translate3d(-100vw,0,0)',
        transition:'transform 2s'
      },
      interTimer: '',
      startTouch: '',
      moveTouch: '',
      canslider: true,
      nowSlider: 0
    }
  },
  computed: {
    sliderImg: function(){
      const [...saveImg] = this.bannerList,    //拷贝图片列表数据，在展示区域的图片实际上首尾拷贝了一样的图片，即尾端拷贝第一张，首端拷贝最后一张
            [imgfirst, ...other] = this.bannerList;
      saveImg.unshift(other[other.length-1]);     
      saveImg.push(imgfirst);
      return saveImg;
    }
  },
  mounted () {
    if(this.bannerList && this.bannerList.length) {
      this.interTimer = setInterval(()=>{
          this.sliderStart();
      },3000);
    }
  },
  methods: {
    stopSlider(e) {
      if (e.target != e.currentTarget) {  
        clearInterval(this.interTimer);
        delete this.sliderActive['transition']; 
        this.startTouch = e.targetTouches[0].screenX;
      }
    },
    moveSlider(e) {
      if (this.nowSlider === -1||this.nowSlider === this.bannerList.length) {  
        return;
      }
      if (e.target != e.currentTarget) {
        this.moveTouch = e.targetTouches[0].screenX;
        let slideDir = this.moveTouch - this.startTouch,
          targetWidth = parseInt(window.getComputedStyle(e.target).width),
          tranDir;
        if (slideDir < -50 || slideDir > 50) {  
          if (slideDir < 0) {  
            slideDir -= 50;
          } else {
            slideDir += 50;
          }
          tranDir = -targetWidth * (this.nowSlider+1) + slideDir;
          this.sliderActive.transform = `translate3d(${tranDir}px,0,0)`;
        }
      }
    },
    continSilder(e) { 
      if (e.target != e.currentTarget && this.moveTouch) {
        const slideDir = this.moveTouch - this.startTouch;
        if (slideDir < 0) {
          this.nowSlider ++;
        } else if (slideDir > 0) {
          this.nowSlider --;
        }
        this.nowSlider --;
        this.sliderStart();
        this.moveTouch = 0;  
        this.startTouch = 0;
        this.interTimer = setInterval(()=>{
            this.sliderStart();
        },3000)
      }
    },
    sliderStart() {
      this.nowSlider ++ 
      this.nowSlider %= this.sliderImg.length
      if(this.nowSlider === this.bannerList.length) {  
        setTimeout(() => { 
          this.sliderActive = {
            transform: `translate3d(-100vw,0,0)`
          }
          this.nowSlider = 0
        }, 500)         
      }
      if(this.nowSlider === -1) {  
        setTimeout(() => {
          this.nowSlider = this.bannerList.length-1;
          this.sliderActive = {
            transform: `translate3d(${-100*(this.nowSlider+1)}vw,0,0)`
          }
        }, 500)       
      }
      this.sliderActive = Object.assign({},{
        transition:'transform 0.5s',  
        transform: `translate3d(${-100*(this.nowSlider+1)}vw,0,0)`
      })
    } 
  }
}
</script>
<style scoped lang="scss">
.slider{
  position:relative;
  .slider-page{
    position:absolute;
    bottom:1rem;
    justify-content:center;
    display: flex;
    align-items:center;
    width:100%;
    .slider-btn{
      width:0.8rem;
      height:0.8rem;
      background-color:#aaa;
      border-radius: 50%;
      margin-right:0.5rem;
      &.active{
        background: #fff;
      }
    }
  }
  .slider-wrap{
    overflow: hidden;
  }
  .slider-items{
    font-size: 0;
    overflow: hidden;
    .slider-item {
      width: 100vw;
      float: left;
      .item-img{
        width: 100%;
      }
    }
  }
}
</style>